<template>
  <!-- 签字的弹框 -->
  <van-popup
    class="pho-esign-dialog"
    v-model="show"
    v-if="show"
    position="bottom"
    closeable
    round
    get-container="body"
  >
    <!-- <demo /> -->
    <!-- <div
      class="pho-esign-content"
      :style="{width:signHeight+'px',height:signWidth+'px',transform: `rotate(90deg) translateY(-${signWidth}px)`}"
    >-->
    <div class="pho-esign-content">
      <div class="pho-esign-show">
        <vue-esign
          class="esign"
          ref="esignRef"
          :width="signWidth-32"
          :height="(signWidth-32)*3/8"
          :isCrop="isCrop"
          v-bind="$attrs"
        />
      </div>
      <div class="pho-esign-button">
        <van-button block round @click="handleGenerate" type="info">生成签字图片</van-button>
        <van-button block round @click="handleReset" type="warning">清空画板</van-button>
        <!-- <van-button size="small" @click="handleBack">退出</van-button>
        <div class="pho-esign-button--right">
          <span class="pho-esign-button-text">画笔粗细</span>
          <van-stepper v-model="lineWidth" min="1" max="10" />
          <van-button size="small" @click="handleGenerate" type="info">生成签字图片</van-button>
          <van-button size="small" @click="handleReset" type="warning">清空画板</van-button>
        </div>-->
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleGenerate" type="primary">生成签字图片</el-button>
      <el-button @click="handleReset" type="warning">清空画板</el-button>
      <el-button @click="show = false">取消</el-button>
    </span>
  </van-popup>
</template>

<script>
import demo from "./demo.vue";
import { Toast } from "vant";
export default {
  components: {
    demo
  },
  data() {
    return {
      show: false, // 弹框是否开启
      showPopover: false,
      lineWidth: 4,
      lineColor: "#000000",
      bgColor: "",
      isCrop: false,
      signHeight: 0,
      signWidth: 0
    };
  },
  computed: {
    lineOpts() {
      return new Array(10).fill(1).map((v, i) => {
        return { text: ++i };
      });
    }
  },
  methods: {
    open() {
      this.show = true;
      this.signHeight = document.body.clientHeight;
      this.signWidth = document.body.clientWidth;
    },
    onSelect(action) {
      Toast(action);
    },
    handleBack() {
      this.show = false;
    },
    handleReset() {
      // 清空画布
      this.$refs.esignRef.reset();
    },
    handleGenerate() {
      this.$refs.esignRef
        .generate()
        .then(res => {
          // 得到了签字生成的base64图片
          Toast.success("生成成功");
          this.$emit("update", res);
          this.show = false;
        })
        .catch(() => {
          //  没有签名，点击生成图片时调用
          Toast.fail("未签名！");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.pho-esign-dialog {
  // width: 100vw;
  // height: 50vh;
  // overflow: hidden;
  .pho-esign-content {
    // overflow: auto;
    /* 设置旋转中心点 */
    // transform-origin: left top;
    padding: 16px;
    padding-top: 53px;
    box-sizing: border-box;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-between;
  }
  .pho-esign-button {
    margin-top: 12px;
    display: flex;
    .van-button {
      margin: 0 10px;
    }
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // font-size: 13px;
    // .van-button + .van-button {
    //   margin-left: 10px;
    // }
    // .van-stepper,
    // .el-color-picker {
    //   margin-right: 10px;
    // }
    // .pho-esign-button--right {
    //   display: flex;
    // }
    // .pho-esign-button-text {
    //   margin-right: 8px;
    //   display: flex;
    //   align-items: center;
    // }
  }
  .pho-esign-show {
    .esign {
      border: 1px dashed #c2c1c1;
    }
  }
}
</style>